<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品列表</title>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css">
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>

    <!--script动态绑定-->
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中目录</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">检测是否全选</button>
        </div>
    </script>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    <!--    <script type="text/html" id="img">-->
    <!--        <img src="image/{{}}" alt="">-->
    <!--    </script>-->
    <script>
        layui.use('table', function () {
            let table = layui.table;
            table.render({
                elem: '#demo1',     //绑定元素
                url: 'findGoods', //数据接口
                id: 'tableId',
                method: "get",
                title: '用户数据表',          //表名
                toolbar: '#toolbarDemo',    //toolbar:'default'————layui的table默认表头工具栏右边有3个操作，分别是过滤字段、导出excel、打印功能
                totalRow: true,             //开启合计行
                page: true,                 //开启分页
                limit: 5,
                limits: [5, 10, 15, 20],
                //如前台获取后端查询到的数据与Layui解析方式code,msg,count,data不一致，则配置如下
                // 后台已经准备好了格式，所以省略
                /* parseData: function (res) {
                     console.log('res=', res);
                     // return {
                     //     code:0,
                     //     msg:"",
                     //     count:100,
                     //     data:[]
                     // }
                     return {
                         code: res.code == 200 ? 0 : 500,
                         msg: res.msg,
                         count: res.obj.count,
                         data: res.obj.data,
                     }
                 },*/
                cols: [
                    [
                        //添加选中行方法：在表头设置一个单选框或者复选框
                        {
                            type: 'checkbox',
                            fixed: 'left',
                        },
                        {
                            field: 'gid',
                            title: '商品编号',
                            sort: true
                        },
                        {
                            field: 'gname',
                            title: '商品名称',
                            sort: true
                        },
                        {
                            field: 'producer',
                            title: '产地',
                            sort: true
                        },
                        {
                            field: 'price',
                            title: '价格',
                            sort: true
                        },
                        {
                            field: 'image',
                            title: '图片',
                            sort: true
                        },
                        {
                            field: 'lable',
                            title: '标签',
                            sort: true
                        },
                        {
                            field: 'categorylevelone',
                            title: '一级分类',
                            sort: true
                        },
                        // {
                        //     field: 'categoryleveltwo',
                        //     title: '二级分类',
                        //     sort: true
                        // },
                        // {
                        //     field: 'categorylevelthree',
                        //     title: '三级分类',
                        //     sort: true
                        // },
                        {
                            title: '操作',
                            align: 'center',    //表头单元格排列方式
                            toolbar: '#barDemo',
                            //也可以使用templet来添加编辑和删除按钮
                            /*templet: function () {
                                let str = "<button type=\"button\" class=\"layui-btn\">删除</button>";
                                str += "<button type=\"button\" class=\"layui-btn\">编辑</button>";
                                return str;
                            },*/
                        },
                    ]
                ]
            });
            //工具栏事件
            table.on('toolbar(demo1)', function (obj) {
                let checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'getCheckData':
                        let data1 = checkStatus.data;
                        layer.alert(JSON.stringify(data1));
                        break;
                    case 'getCheckLength':
                        let data2 = checkStatus.data;
                        layer.msg('选中了' + data2.length + '个');
                        break;
                    case  'isAll':
                        layer.msg(checkStatus.isAll ? '全选' : '未全选');
                        break;
                }
            })
            /*//触发事件
            table.on('toolbar(demo1)', function(obj){
                let checkStatus = table.checkStatus(obj.config.id);
                switch(obj.event){
                    // case 'add':
                    //     layer.msg('添加');
                    //     break;
                    case 'delete':
                        layer.msg('删除');
                        break;
                    case 'update':
                        layer.msg('编辑');
                        break;
                };
            });*/
        });
    </script>

    <script>
        //layui.user=()是layer弹出层的必要
        //layer提供了5种层类型,type可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）
        layui.use(['table', 'layer'], function () {
            let table = layui.table;
            let $ = layui.jquery;
            let layer = layui.layer;
            //给添加商品的按钮绑定事件
            $("#addGoods").click(function () {  //弹出层，弹出插入表单
                layer.open({
                    type: 2,
                    title: '添加商品',                 //弹框标题
                    content: 'jump?url=goods_add',      //iframe层，加载新页面
                    area: ['600px', '500px'],         //宽高
                    closeBtn: 1,                     //默认1，如果不显示为0，好看一点为2
                    shade: [0.5, 'green'],                      //默认是0.3透明度的黑色遮罩背景
                    //end层关闭后触发的回调
                    end: function () {
                        console.log("层关闭了。。。")
                        //table.reload(ID,options,deep)表格重载(自动化渲染的重载)
                        table.reload("tableId");
                    },
                });
            });
        });
    </script>

    <script>
        layui.use(['table', 'layer'], function () {
            let table = layui.table;
            let layer = layui.layer;
            let $ = layui.jquery;
            //监听工具条事件
            //tool:工具条事件名，demo1是table原始容器的属性，
            table.on('tool(demo1)', function (obj) { //注：tool 是工具条事件名,demo1 是table原始容器的属性,lay-filter="对应的值"
                let data = obj.data;        //获得当前行数据
                let layEvent = obj.event;   //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                console.log(obj)
                // let tr = obj.tr;            //获得当前行 tr 的 DOM 对象（如果有的话）

                if (layEvent === 'del') {      //删除
                    layer.confirm('确认要删除第' + data.gid + '条数据么？？？', {icon: 3, title: '提示'}, function (index) {
                        // let flag = confirm('确认要删除第' + data.gid + '条数据吗？');   //window里的confirm（不推荐）,layer弹出层中自带进阶版！
                        //getJSON中{}里写请求参数,function参数中d为后端删除后返回的数据
                        $.post("deleteGood", {gid: data.gid}, function (d) {
                            if (d !== 1) {
                                layer.msg(d.msg);
                            } else {
                                obj.del();              //删除当前行的DOM结构，并更新缓存
                                layer.close(index);
                            }
                        });
                    });
                } else if (layEvent === 'edit') {     //编辑
                    // layer.alert('编辑行:<br>' + JSON.stringify(data))
                    //同步更新缓存对应的值
                    layer.open({
                        type: 2,
                        title: '修改商品',                 //弹框标题
                        // content: 'http://localhost:8888/goods_edit.html?gid='+obj.data.gid+'?categorylevelone='+obj.data.categorylevelone,      //iframe层，加载新页面
                        content: 'jump?url=goods_edit'+data.gid,      //iframe层，加载新页面
                        area: ['600px', '500px'],         //宽高
                        closeBtn: 1,                     //默认1，如果不显示为0，好看一点为2
                        shade: [0.5, 'green'],                      //默认是0.3透明度的黑色遮罩背景
                        //end层关闭后触发的回调
                        end: function () {
                            //table.reload(ID,options,deep)表格重载(自动化渲染的重载)
                            table.reload("tableId");
                        },
                        //层弹出后的成功回调方法
                        // success: function (layero, index) {       //layero、index分别是当前层DOM、当前层索引
                        //     //弹出层数据回显
                        //     //layer.getChildFrame(selector, index) - 当前页获取iframe页的DOM（selector即iframe页的选择器）
                        //     console.log("iframe_obj",obj)
                        //     var body = layer.getChildFrame('form', index);
                        //     // body.find("#categoryId").val(obj.data.categorylevelone);
                        //     body.find("#gid").val(obj.data.gid);
                        //     body.find("#gname").val(obj.data.gname);
                        //     body.find("#producer").val(obj.data.producer);
                        //     body.find("#price").val(obj.data.price);
                        //     // body.find("#categorylevelone").val(obj.data.categorylevelone);
                        //     body.find("#lable").val(obj.data.lable);
                        //     //如果是性别的话可以选择属性选择器name和value的结合来进行回显
                        //     // body.find("input[name='gender'][value=1]").attr({'checked':obj.data.gender==1?true:false});
                        //     // body.find("input[name='gender'][value=0]").attr({'checked':obj.data.gender==0?true:false});
                        //     //下拉列表类别回显
                        //     // body.find("input[name='categorylevelone'][value="+1+"]").attr("selected",true);
                        //     // body.find("option[value='"+obj.data.categorylevelone+"']").attr("selected",true)
                        // },
                    });

                } else if (layEvent === 'LAYTABLE_TIPS') {
                    layer.alert('Hi，头部工具栏扩展的右侧图标。');
                } else {
                    console.log("不存在")
                }
            });
        });
    </script>
</head>
<body>
<div class="layui-container">
    <!--    <img src="image/apple.jpg" alt="图片解析错误">-->
    <!--    layui-hide:通过修改列hide属性后重载表格来实现个别列的显示与隐藏。-->
    <table class="layui-hide" id="demo1" lay-filter="demo1"></table>
    <button id="addGoods" type="button" class="layui-btn layui-btn-fluid">添加商品</button>
</div>

</body>
</html>